<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<!-- template designed by Marco Von Ballmoos -->
			<title>WikiPlot Userguide</title>
			<link rel="stylesheet" href="../media/stylesheet.css" />
			<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'/>
		</head>
		<body>
			<div class="page-body">			
	<table class="tutorial-nav-box">
	<tr>
		<td style="width: 30%">
							<a href="../WikiPlot/tutorial_DeveloperGuide.pkg.html" class="nav-button">Previous</a>
					</td>
		<td style="text-align: center">
					</td>
		<td style="text-align: right; width: 30%">
							<a href="../WikiPlot/tutorial_Reference.pkg.html" class="nav-button">Next</a>
					</td>
	</tr>
	<tr>
		<td style="width: 30%">
							<span class="detail">PlotClass Developer Guide</span>
					</td>
		<td style="text-align: center">
					</td>
		<td style="text-align: right; width: 30%">
							<span class="detail">WikiPlot Syntax Reference</span>
					</td>
	</tr>
</table>
	
<div><a name=""></a><div class="ref-title-box">WikiPlot Userguide<h1 class="ref-title">WikiPlot Userguide</h1>
		<h2 class="ref-purpose">Introduction to WikiPlot</h2></div>
	<div class="ref-synopsis"><p>The WikiPlot Development Team.</p>
			<div class="authors"><h2 class="title">Authors</h2><span class="author">Jonas F. Jensen.
				<div class="author-blurb"><a href="mailto:wikiplot@jopsen.dk">WikiPlot@Jopsen.dk</a></div></span>
			<span class="author">Ismail Faizi
				<div class="author-blurb"><a href="mailto:kanafghan@gmail.com">KanAfghan@Gmail.com</a></div></span></div></div>
	<span><a name="UserGuide"></a><h2 class="title">WikiPlot Userguide</h2><p>This is s simple guide to learn and become familiar with WikiPlot syntax, if the WikiPlot extension is installed on the wiki you wish to modify, you can add simply just type the WikiPlot syntax in your file. This chapter will not document all the features of WikiPlot but just the basics.</p>
		<p>First things first, let's start with a short introduction our terminology. We have one plot and one or more graphs (Note the words I just used). Where plot defines the coordinate space, width, height and axes of the final image. A plot contains one or more graph, which is expressed with a mathematical expression (for instance: x^2+4x+5). If you thing this is wired, hold on there, I will clarify in just a moment.</p>
		<p>Now let's get dirty, following code will generate an image with 1 graph, from the expression y(x)=x+4.</p>
		<div class="src-code"><pre>
&lt;wikiplot&gt;
	&lt;graph&gt;x+4&lt;/graph&gt;
&lt;/wikiplot&gt;
</pre></div>
		<p>Okay that is possibly the shortest we can make it. I would not be surprised if you would consider that a little too basic. So just to match some basic functionality, we are going to add another graph with the expression y(x)=3*x-3, and some optional parameters to modify the output image.</p>
		<div class="src-code"><pre>
&lt;wikiplot height=&quot;200&quot; width=&quot;200&quot; caption=&quot;Simple plot&quot; xspan=&quot;-100;100&quot; yspan=&quot;-100;100&quot;&gt;
	&lt;graph label=&quot;Graph 1.&quot; color=&quot;255,0,0&quot;&gt;x+4&lt;/graph&gt;
	&lt;graph label=&quot;Graph 2.&quot;&gt;3*x-3&lt;/graph&gt;
&lt;/wikiplot&gt;
</pre></div>
		<p>Now this is different. This will result in an image with width and height of 200 pixels. It will have a caption saying <em>Simple plot</em>. The image will be a clip of a coordinate space, where minimum X will be -100 and maximum X will be 100, same goes for Y. The image contain 2 labels in the corner, one saying <em>Graph 1</em> another saying <em>Graph 2</em>, one of them will have the color rgb(255,0,0) which is red. Apart from that there will also be 2 graphs.</p>
		<p>To simplify the example, I have divided and explained it here:</p>
		<ul mark = "bullet"><li><p><em>height</em></p>
				<blockquote><p>Height of the output image in pixels.</p></blockquote></li>
			<li><p><em>width</em></p>
				<blockquote><p>Width of the output image in pixels.</p></blockquote></li>
			<li><p><em>caption</em></p>
				<blockquote><p>Caption on the output image.</p></blockquote></li>
			<li><p><em>xspan and yspan</em></p>
				<blockquote><p>Values representing minimum x and maximum x, in coordinate space. If you set xspan=&quot;-50;75&quot; the lowest x values on your image will be -50 and the highest will be 75. This does not have anything with width to do, and is in no way related to pixels! This feature enables you to zoom in and out on the coordinate space, independent of image size. xspan and yspan are completely similar except for the fact that they change the y or x coordinate space respectively.</p></blockquote></li>
			<li><p><em>x+4 and 3*x-3</em></p>
				<blockquote><p>These are mathematical expressions defining the 2 graphs on the image.</p></blockquote></li>
			<li><p><em>label</em></p>
				<blockquote><p>Labels that are placed in the corner of the image, displayed in the same color as the graphs they represent.</p></blockquote></li>
			<li><p><em>color</em></p>
				<blockquote><p>Color of the graph, in an RGB (Red,Green,Blue) representation.</p></blockquote></li></ul>

		<p>If you do not understand this, please feel free to contact us, or post your question at http://groups.google.com/group/wikiplot and we will hurry to help. We are well aware that our terminology is very bad, and that some of our syntax might confuse users, so please help us improve.</p></span></div>

	<table class="tutorial-nav-box">
	<tr>
		<td style="width: 30%">
							<a href="../WikiPlot/tutorial_DeveloperGuide.pkg.html" class="nav-button">Previous</a>
					</td>
		<td style="text-align: center">
					</td>
		<td style="text-align: right; width: 30%">
							<a href="../WikiPlot/tutorial_Reference.pkg.html" class="nav-button">Next</a>
					</td>
	</tr>
	<tr>
		<td style="width: 30%">
							<span class="detail">PlotClass Developer Guide</span>
					</td>
		<td style="text-align: center">
					</td>
		<td style="text-align: right; width: 30%">
							<span class="detail">WikiPlot Syntax Reference</span>
					</td>
	</tr>
</table>
	
	<p class="notes" id="credit">
		Documentation generated on Fri, 13 Oct 2006 16:12:22 +0200 by <a href="http://www.phpdoc.org" target="_blank">phpDocumentor 1.3.0</a>
	</p>
	</div></body>
</html>